<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>重力感应移动端判断横竖屏</title>
    <style>
        body,html{
            width:100%;
            height:100%;
            margin:0;
            background:#ccc;
            position:relative;
            top: 0;
            left:0;
        }
        .screen{
            display:none;
            width:100%;
            height:100%;
            text-align:center;
            line-height:200px;
            background:rgba(0,0,0,0.5);
            position:absolute;
            top:0;
            left:0;
        }
        p{
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="screen">
        为了更好的体验，请使用竖屏浏览
    </div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    function screenZ() {
        if (window.orientation == 90 || window.orientation == -90) {
//横屏
            $(".screen").show();
            return false;
        }
        else if (window.orientation == 0 || window.orientation == 180) {
//竖屏
            $(".screen").hide();
            return false;
        }

    }
    //页面加载时调用
    $(function(){
        screenZ();
    });
    //屏幕方向变化时调用
    $(window).bind( "orientationchange", function(e){
        screenZ();
    });

</script>
</body>
</html>